<template>
  <!--投票模块-->
  <div>
    <div class="c_surveyBox">
      <div class="c_surTit">
        欢迎参与问卷调查
        <span class="c_surStatus">{{voteState_cn}}</span>
      </div>
      <ul class="c_surQueBox">
        <template v-for="(i,v) in rl">
        <li class="c_surQ">
          <em>{{i+1}}.</em>
          <span>{{v}}</span>
        </li>
        </template>
      </ul>
      <div class="c_surBtnBox clearfix">
        <div class="c_surJoin c_surBtn" v-show="s_join"><a :href="joinLink">参与投票</a></div>
        <div class="c_surJoin c_finished" v-show="!s_join">参与投票</div>
        <div class="c_surWatch c_surBtn" v-show="s_check"><a :href="watchLink">查看结果</a></div>
        <div class="c_surWatch c_finished" v-show="!s_check">查看结果</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // el: "#app_comment",
  data() {
    return {
      rdata: {},
      watchLink: "",
      joinLink:"",
      pid: "",
      vote_state:0,
      s_check:true,
      s_join:true,
      voteState_cn:"进行中",
      rl:[],
    }
  },
  computed:{
  },
  methods: {
    init(_next) {
      var that = this;
      var jsonpUrl = "http://survey.news.sina.com.cn/survey_js.php?pid=" + that.pid + "&t=jsonp&x=1";
      var jsonpName = "survey_js_" + that.pid;
      $.ajax({
        url: jsonpUrl,
        dataType: 'jsonp',
        data: {},
        cache: false,
        jsonpCallback: jsonpName,
        type: "get",
        success: function (data) {
          // console.log(data);
          if (!!data.global && !!data.global.survey_id && !!data.list) {
            _next(data);
          } else {
            console.log("err");
            console.log(data);
          }
        }
      })
    },
    /*
0 已停止      只能查看调查结果，无法进行投票
1 进行中      能投票也能查看调查结果
2 隐藏结果  只能投票不能查看调查结果
3 已结束      不能投票也不能查看调查结果 
    */
    survey_state_0(){
      this.s_check=true;
      this.s_join=false;
      this.voteState_cn="已停止";
    },
    survey_state_1(){
      this.s_check=true;
      this.s_join=true;
      this.voteState_cn="进行中";
    },
    survey_state_2(){
      this.s_check=false;
      this.s_join=true;
      this.voteState_cn="进行中";
    },
    survey_state_3(){
      this.s_check=false;
      this.s_join=false;
      this.voteState_cn="已结束";
    },
  },
  created() {
    var that = this;
    this.pid = $("#surveyApp").attr("data-pid");
    this.init(function (data) {
      that.rdata = data;
      that.vote_state=that.rdata.global.vote_state;
      let s_name="survey_state_"+that.vote_state;
      that[s_name]();
      that.joinLink = "http://survey.sina.cn/survey?id=" + that.pid;
      that.watchLink = "http://survey.sina.cn/result?id=" + that.pid;
      $.each(that.rdata.list,function(k,v){
        that.rl.push(v.question);
      });
    })
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  lightFont=#95989A;
  btnBd=#EBE8E8;
c_grayTit() {
  background-color: c_bg;
  padding: 10px 0 10px 8px;
  color: lightFont;
}
.c_surveyBox{
  background-color:c_bg;
  padding:12px 8px 20px 8px;
  width 100%
}
.c_surTit{
  font-size 17px
  line-height 22px
  margin-bottom 26px
  position relative
  width 100%
  span{
    position:absolute;
    right:0;
    font-size:12px;
    color:c_red;
  }
}
.c_surQ{
  font-size 14px
  line-height 28px
  position relative
  padding-left 16px
  em{
    position absolute
    left 0
  }
}
.c_surBtnBox{
  margin-top 16px
}
.c_surBtn{
  width 48.5%
  text-align center
  border 1px solid c_red
  color c_red
  border-radius 4px
  background-color rgba(236, 41, 45, 0.07);
  font-size 14px
  line-height 36px
  a{
    color c_red
    width 100%
    display block
    line-height 36px
  }
}
.c_finished{
  
  width 48.5%
  text-align center
  border 1px solid #C7C6C6
  color #C7C6C6
  border-radius 4px
  background-color rgba(199,198,198,0.07);
  font-size 14px
  line-height 36px
}
.c_surJoin{
  float left
}
.c_surWatch{
  float right
}

</style>